<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Liujingjing
 * @LastEditTime: 2022-01-10 11:57:37
-->
<template>
  <div ref="right1_container" style="height: 100%">
    <!-- <h2 class="title">右侧第一个</h2>
    {{ed}}
    <ul class="list">
    <li v-for="d in devices" :key="d.type">
      <span>{{d.type}}</span>
      <span>{{d.value}}</span>

    </li>
    </ul> -->
  </div>
</template>
<script>
//获取请求工具
import { get } from "../../../utils/request";
import { DualAxes } from "@antv/g2plot";
import moment from 'moment'
export default {
  // //监听器
  //   watch:{
  //     ed:{
  //       handler(){
  //       this.loadData()
  //       },
  //       deep:true//深度监听
  //     }
  //   },
  // //计算属性
  //   computed:{
  //    ...mapState(['ed'])
  //   },

  //生命周期钩子，表示当页面渲染完毕时执行
  mounted() {
  //  this.loadData();
  this.initData()
  },

  //数据，必须返回一个数据，在这个对象中定义页面中需要的变量
  data() {
    return {
      dataArr: [],
      //  //声明一个变量，初始值为空数组
      //  devices:[]
    };
  },

  //方法，可以在生命周期中调用，或被事件触发
  methods: {
    initData(){
      get('http://8.130.15.199:7001/dashboard/pageQueryTodayData',{
        page:1,
        pageSize :5,
        device_id:1,
        
      }).then(res=>{
        res.data.list.forEach(item => {
          item.dataTime = moment(item.insert_time).format('HH:mm')
        });
        this.dataArr= res.data.list;
        console.log(4444,this.dataArr);
        this.initChart()
      })
    },
    initChart() {
      const dualAxes = new DualAxes(this.$refs.right1_container, {
        data: [this.dataArr,this.dataArr],
        xField: "dataTime",
        yField: ["humidity", "id"],
        autoFit:true,
        
        geometryOptions: [
          {
            geometry: "line",
            color: "#5B8FF9",
          },
          {
            geometry: "line",
            color: "#5AD8A6",
          },
        ]
      })
        dualAxes.render()
    },
    //  //加载数据-与后台交互获取设备数据
    //  loadData(){
    //    let url = "http://127.0.0.1:7001/dashboard/queryDeviceOnlineNumber"
    //    get(url).then(resp => {
    //      //resp后台返回给我们的结果
    //      this.devices = resp.data;
    //    })
    //  }
  },
};
</script>
<style scoped>

</style>
